<template>
  <li :class="{ active: index == num }" @click="changeIndex(index)">
    {{ label }}
  </li>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  name: "Tab",
  props: {
    label: {
      type: String,
      default: "tab",
    },
    index: {
      type: [String, Number],
      default: 1,
    },
  },
  data() {
    return {
      //   num: 1,
    };
  },
  //进入页面获取父组件tabs里面的变量 currentIndex的值与自己的index进行比较
  mounted() {
    // console.log(this.$parent.currentIndex);
    // this.num = this.$parent.currentIndex;
  },
  //计算属性 computed
  computed: {
    num() {
      return this.$parent.currentIndex;
    },
  },
  methods: {
    //点击li切换高亮的颜色
    changeIndex(index) {
      console.log("点击了li", index);
      //修改父组件里面的变量 currentIndex
      //调用父元素的事件，传递index参数，从而改变父元素的变量currentIndex
      this.$parent.changePindex(index);
    },
  },

  //此页面也可以用render函数渲染
  // render(){}
};
</script>

<style></style>
